<template>
  <div class="cardStyle" @click="goDetail(list.orderNo)">
    <!-- 没有电话显示 -->
    <div class="title" v-if="list.orderBusinessType==1||list.orderBusinessType==4||list.orderBusinessType==5||list.orderBusinessType==6">
      <div class="titleLeft">
        <span>{{list.plateNum||list.customerName}}</span>

        <div class="titleLeftImage" v-if="list.member">
          <img src="../../assets/images/VIP@2x.png" width="100%" />
        </div>
      </div>
      <div class="titleRigth"></div>
    </div>
    <!-- 有电话的时候显示 -->
    <div class="havePhone" v-else>
      <div class="title">
        <div class="titleLeft">
          {{list.customerPhone}}
        </div>
        <div class="titleRigth">
          {{list.orderBusinessType==2?'办会员卡':(list.orderBusinessType==7?'退卡流水':(list.orderBusinessType==8?"拼团退款":(list.orderBusinessType==3?'会员卡充值':'')))}}
        </div>
      </div>
      <div class="havePhoneUsername">
        <span>{{list.customerName}}</span>
        <div class="havePhoneUsernameIcon" v-if="list.member">
          <img src="../../assets/images/VIP@2x.png" width="100%" />
        </div>
      </div>
    </div>
    <!-- v-for循环遍历生成 -->
    <div class="item" v-if="list.orderBusinessType==1||list.orderBusinessType==4||list.orderBusinessType==5||list.orderBusinessType==6">
      <div class="itemLeft">消费项目({{list.subjectNames.split(',').length}})</div>
      <div class="itemRight">{{list.subjectNames}}</div>
    </div>
		<div v-else>
		<div class="item">
		  <div class="itemLeft">会员卡名称</div>
		  <div class="itemRight">{{list.subjectNames}}</div>
		</div>
			<div class="item" v-if="list.rechargeAmount">
				<div class="itemLeft">充值金额</div>
				<div class="itemRight">¥{{list.rechargeAmount}}</div>	
			</div>
			<div class="item" v-if="list.giveAmount">
				<div class="itemLeft" >赠送金额</div>
				<div class="itemRight">¥{{list.giveAmount}}</div>
			</div>
		</div>
			<div class="item">
				<div class="itemLeft">现金支付</div>
				<div class="itemRight">¥{{list.payAmount}}</div>
			</div>
    <div class="time">{{list.createTime}}</div>
  </div>
</template>

<script>
export default {
	props:[
		'list'
	],
	methods:{
		goDetail(val){
			this.$router.push({
				path:'/details',
				query:{
					orderNo:val
				}
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.cardStyle {
  background: white;
  padding: 40px 24px;
  font-size: 28px;
  color: #737373;
  border-radius: 20px;
  .havePhone {
    .havePhoneUsername {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      .havePhoneUsernameIcon {
        width: 33px;
        height: 31px;
        margin-left: 20px;
      }
    }
  }
  .title {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    .titleLeft {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      color: #272727;
      .titleLeftImage {
        width: 33px;
        height: 31px;
        margin-left: 20px;
      }
    }
    .titleRigth {
    }
  }
  .item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    .itemLeft {
    }
    .itemRight {
      color: #272727;
      flex: 1;
      padding-left: 20px;
      text-align: end;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>
